<template>
<div>
    理财编号: <input type="text" v-model="whereInfo.Fid" placeholder="请输入理财编号">
    理财名称: <input type="text" v-model="whereInfo.Fname" placeholder="请输入理财名称">
    理财收益: <input type="text" v-model="whereInfo.MinFapy" placeholder="请输入最低理财收益">-<input type="text" v-model="whereInfo.MaxFapy" placeholder="请输入最高理财收益">
    <input type="button" value="查询" class="btn btn-success" @click="LoadShow">
    <table class="table tabl-bordered" border="1">
        <thead>
            <tr style="background-color: aqua;">
                <td>理财项目编号</td>
                <td>理财产品名称</td>
                <td>年收益</td>
                <td>月收益</td>
                <td>最低金额</td>
                <td>理财次数</td>
                <td>风险等级</td>
                <td>操作</td>
            </tr>
        </thead>
    
        <tbody>
            <tr v-for="item in info" :key="item.F_Id">
                <td>{{ item.F_Id }}</td>
                <td>{{ item.F_Name }}</td>
                <td>{{ item.F_APY }}</td>
                <td>{{ (item.F_APY/12).toFixed(2) }}%</td>
                <td>{{ item.F_MinMoney.toFixed(2) }}CNY</td>
                <td>{{ item.F_Number }}</td>
                <td>{{ item.F_Level==0?"低风险":item.F_Level==1?"中风险":"高风险" }}</td>
                <td>
                    <slot :id="item.F_Id"></slot>
                </td>
            </tr>
        </tbody>
    </table>
    
    <span>
        总共{{ PageInfo.totalCount }}条数据,每页显示{{ PageInfo.PageSize }}条,当前第{{ PageInfo.PageIndex }}/{{ PageInfo.PageCount }}页码
        &nbsp;
        <a href="#" @click="PageSet('F')">首页</a>&nbsp;
        <a href="#" @click="PageSet('U')">上一页</a>&nbsp;
        <a href="#" @click="PageSet('N')">下一页</a>&nbsp;
        <a href="#" @click="PageSet('E')">尾页</a>&nbsp;
        <select v-model="Selsize"  @change="UpdateSize">
            <option value="1">1条/页</option>
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
            <option value="4">4条/页</option>
        </select>
        <input type="text" v-model="TextSize" style="width: 30px;">
        <input type="button" value="GO" @click="TiaoIndex">
    </span>
</div>
</template>
    
<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue';
import { useRouter } from 'vue-router';
    
//创建路由对象
const router=useRouter();
    
//创建响应式对象 用于显示
const info=ref([{
    F_Id:0,
    F_Name:"",
    F_APY:0,
    F_MinMoney:0,
    F_Number:0,
    F_Level:0
}])
    
//创建响应式数据（用于查询）
const whereInfo=ref({
    Fid:"",
    Fname:"",
    MinFapy:"",
    MaxFapy:""
})
    
//创建响应式数据（用于分页）
const PageInfo=ref({
    PageIndex:1,//页码
    PageSize:2,//当前多少页
    totalCount:0,//总条数
    PageCount:0//总页数
})
    
//创建响应式数据 (下拉框 文本框跳转分页)
const Selsize=ref(2)
const TextSize=ref("")
    
//创建生命周期函数钩
onMounted(()=>{
    LoadShow()
})
    
//创建显示方法
const LoadShow=()=>{
    axios.get("https://localhost:44321/api/Finans/ShowFinanInfo",
        {
            params:{
                Fid:whereInfo.value.Fid,
                Fname:whereInfo.value.Fname,
                MinFapy:whereInfo.value.MinFapy,
                MaxFany:whereInfo.value.MaxFapy,
                PageIndex:PageInfo.value.PageIndex,
                PageSize:PageInfo.value.PageSize
            }
        }
    )
    .then(res=>{
        info.value=res.data.list

        PageInfo.value.totalCount=res.data.totalCount
        PageInfo.value.PageCount=res.data.PageCount
    })
}
    
//完成分页
const PageSet=(val:string)=>{
    switch(val)
    {
        case 'F':
            //首页
            PageInfo.value.PageIndex=1;
        break;

        case 'U':
            //上一页
            if(PageInfo.value.PageIndex>1)
            {
                PageInfo.value.PageIndex--;
            }
            else
            {
                alert('当前已经是首页');
                return;
            }
        break;

        case 'N':
            //下一页
            if(PageInfo.value.PageIndex<PageInfo.value.PageCount)
            {
                PageInfo.value.PageIndex++;
            }
            else
            {
                alert('当前已经是最后一页');
                return;
            }
        break;

        case 'E':
            //尾页
            PageInfo.value.PageIndex=PageInfo.value.PageCount;
        break;
    }
    LoadShow();
}
    
//下拉框改变分页
const UpdateSize=()=>{
    PageInfo.value.PageSize=Selsize.value;
    PageInfo.value.PageIndex=1;
    LoadShow();
}

//文本框跳转页面
const TiaoIndex=()=>{
    const newIndex=TextSize.value;

    if(newIndex=="")
    {
        alert('输入的值不能为空');
        return;
    }
    //输入的值必须为数字
    if(isNaN(Number(newIndex)))
    {
        alert('输入的值必须为数字');
        TextSize.value="";
        return;
    }
    //输入的值不能小于1
    if(Number(newIndex)<1)
    {
        alert('输入的值不能小于1');
        TextSize.value="";
        return;
    }
    //输入的值不能大于总页数
    if(Number(newIndex)>PageInfo.value.PageCount)
    {
        alert('输入的值不能大于总页数');
        TextSize.value="";
        return;
    }
    PageInfo.value.PageIndex=Number(newIndex);
    LoadShow();
}
</script>
    